<template>
  <a-modal
    title="修改"
    :maskClosable="false"
    @cancel="onClose"
    :visible="pDstChannelEditVisiable"
    :keyboard="false"
    :width="1050"
    :footer="null"
    :centered="true"
  >
    <div>
      <a-tabs v-model="activeKey" @change="callback" small="small">
        <a-tab-pane key="1" tab="基本信息">
          <a-form :form="form">
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="机构标识" v-bind="formItemLayout">
                  <a-input v-decorator="['instId']" :disabled="true" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="通道标识" v-bind="formItemLayout">
                  <a-input v-decorator="['dstChannelId']" :disabled="true" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="通道名称" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'dstChannelName',
                      {
                        rules: [{ required: true, message: '不能为空' }],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="通道最大并发数(笔)" v-bind="formItemLayout">
                  <a-input v-decorator="['maxSupportNum']" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="支付通道延时类型" v-bind="formItemLayout">
                  <a-select
                    v-decorator="['txnDelayType']"
                    @change="handleChange"
                  >
                    <a-select-option value="1"> 实时到账 </a-select-option>
                    <a-select-option value="2"> 普通到账 </a-select-option>
                    <a-select-option value="3"> 24小时到账 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="支持账户类型" v-bind="formItemLayout">
                  <a-checkbox-group
                    v-model="value"
                    name="supportAcctType"
                    :options="supportAcctTypeList"
                    @change="selectAcct"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="是否支持智能路由" v-bind="formItemLayout">
                  <a-radio-group>
                    <a-radio :value="Y">是</a-radio>
                    <a-radio :value="N">否</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="通道通讯服务类名" v-bind="formItemLayout">
                  <a-input v-decorator="['dstServiceName']" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="通道状态" v-bind="formItemLayout">
                  <a-select
                    v-decorator="['dstChannelStatus']"
                    @change="handleChange"
                  >
                    <a-select-option value="Y"> 启用 </a-select-option>
                    <a-select-option value="N"> 停用 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="熔断控制开关" v-bind="formItemLayout">
                  <a-select
                    v-decorator="['fusingEnableFlag']"
                    @change="handleChange"
                  >
                    <a-select-option value="Y"> 开启 </a-select-option>
                    <a-select-option value="N"> 关闭 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row type="flex" justify="center">
              <a-button type="primary" @click="next">下一步</a-button>
              <a-button style="margin-left: 8px" @click="onClose"
                >取消</a-button
              >
            </a-row>
          </a-form>
          <!-- 通道支持银行配置 列表 -->
          <p-bank-support-cfg ref="pBankSupportCfg"></p-bank-support-cfg>
          <p-dst-channel-cfg ref="pDstChannelCfg"></p-dst-channel-cfg>
          <p-sec-plan ref="pSecPlan"></p-sec-plan>
        </a-tab-pane>
        <a-tab-pane key="2" tab="营业时间">
          <a-form :form="form">
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="业务控制规则" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'bizCtrlRule',
                      {
                        rules: [
                          {
                            required: true,
                            message: '必填',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="营业开始日期" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'bizStartDate',
                      {
                        rules: [
                          {
                            required: true,
                            message: '必填',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="营业开始时间" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'bizStartTime',
                      {
                        rules: [{ required: true, message: '不能为空' }],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="营业截止时间" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'bizEndTime',
                      {
                        rules: [{ required: true, message: '不能为空' }],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="通道超时时间(毫秒)" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'channelTimeout',
                      {
                        rules: [
                          { required: true, message: '不能为空' },
                          {
                            reg: '^[1-9]+([0-9]{1,7})?$',
                            message: '请检查格式',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row type="flex" justify="center">
              <a-button type="primary" @click="pre">上一步</a-button>
              <a-button style="margin-left: 8px" @click="next">下一步</a-button>
            </a-row>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="3" tab="业务限额">
          <a-form :form="form">
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="单笔最大限额" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'singleLimitMaxAmt',
                      {
                        rules: [
                          {
                            max: 15,
                            message: '不能超过15位字符',
                          },
                          {
                            reg: '^[0-9]+(.[0-9]{1,2})?$',
                            message: '请检验格式',
                          }
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="单笔最小限额" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'singleLimitMinAmt',
                      'dayLimitAmt',
                      {
                        rules: [
                          {
                            max: 15,
                            message: '不能超过15位字符',
                          },
                          {
                            reg: '^[0-9]+(.[0-9]{1,2})?$',
                            message: '请检验格式',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="日累计限额" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'dayLimitAmt',
                      {
                        rules: [
                          {
                            max: 15,
                            message: '不能超过15位字符',
                          },
                          {
                            reg: '^[0-9]+(.[0-9]{1,2})?$',
                            message: '请检验格式',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="日累计限次" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'dayLimitNum',
                      {
                        rules: [
                          { reg: '^[1-9][0-9]{0,7}$', message: '请检验格式' },
                          {
                            max: 8,
                            message: '不能超过8位字符',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="月累计限额" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'monthLimitAmt',
                      {
                        rules: [
                          {
                            reg: '^[0-9]+(.[0-9]{1,2})?$',
                            message: '请检查格式',
                          },
                          {
                            max: 15,
                            message: '不能超过15位字符',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="月累计限次" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'monthLimitNum',
                      {
                        rules: [
                          {
                            reg: '^[1-9][0-9]{0,7}$',
                            message: '请检查格式',
                          },
                          {
                            max: 8,
                            message: '不能超过8位字符',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :md="12" :sm="24">
                <a-form-item label="单笔退货限额" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'singleRefundLimitAmt',
                      {
                        rules: [
                          {
                            reg: '^[0-9]+(.[0-9]{1,2})?$',
                            message: '请检查格式',
                          },
                          {
                            max: 15,
                            message: '不能超过15位字符',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-item label="单日累计退货限额" v-bind="formItemLayout">
                  <a-input
                    v-decorator="[
                      'dayRefundLimitAmt',
                      {
                        rules: [
                          {
                            reg: '^[0-9]+(.[0-9]{1,2})?$',
                            message: '请检查格式',
                          },
                          {
                            max: 15,
                            message: '不能超过15位字符',
                          },
                        ],
                      },
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row type="flex" justify="center">
              <a-button type="primary" @click="pre">上一步</a-button>
              <a-button style="margin-left: 8px" @click="next">下一步</a-button>
            </a-row>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="4" tab="通道交易">
          <p-dst-txn-auth-cfg ref="pDstTxnAuthCfg"></p-dst-txn-auth-cfg>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import PBankSupportCfg from "../pBankSupportCfg/PBankSupportCfg";
import PDstChannelCfg from "../pDstChannelCfg/PDstChannelCfg";
import PSecPlan from "../pSecPlan/PSecPlan";
import PDstTxnAuthCfg from "../pDstTxnAuthCfg/PDstTxnAuthCfg";

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 10 },
};
const supportAcctTypeList = [];
export default {
  name: "PDstChannelEdit",
  components: { PBankSupportCfg, PDstChannelCfg, PSecPlan,PDstTxnAuthCfg },
  props: {
    pDstChannelEditVisiable: {
      default: false,
    },
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this),
      roleData: [],
      userId: "",
      loading: false,
      supportAcctTypeList,
      activeKey: "1",
    };
  },
  computed: {
    ...mapState({
      currentUser: (state) => state.account.user,
    }),
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    handleChange() {},
    //多选框
    selectAcct(checkedValues) {
      console.log("checked = ", checkedValues);
      console.log("value = ", this.value);
    },
    ...mapMutations({
      setUser: "account/setUser",
    }),
    onClose() {
      this.loading = false;
      this.form.resetFields();
      this.$emit("close");
    },
    setFormValues({ ...list }) {
      let fields = [
        "instId",
        "dstChannelId",
        "dstChannelName",
        "maxSupportNum",
        "txnDelayType",
        "supportAcctType",
        "intelligentRouteFlag",
        "dstServiceName",
        "dstChannelStatus",
        "fusingEnableFlag",
        "stopReason",
      ];
      Object.keys(list).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key);
          let obj = {};
          obj[key] = list[key];
          this.form.setFieldsValue(obj);
        }
      });
    },

    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true;
          let user = this.form.getFieldsValue();
          user.roleId = user.roleId.join(",");
          user.userId = this.userId;
          user.deptId = this.userDept;
          this.$put("user", {
            ...user,
          })
            .then((r) => {
              this.loading = false;
              this.$emit("success");
              // 如果修改用户就是当前登录用户的话，更新其state
              if (user.username === this.currentUser.username) {
                this.$get(`user/${user.username}`).then((r) => {
                  this.setUser(r.data);
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    next() {
      this.activeKey = (Number(this.activeKey) + 1).toString();
    },
    closeOne() {},
    pre() {
      this.activeKey = (Number(this.activeKey) - 1).toString();
    },
  },
  watch: {},
};
</script>
